<template>
	<view class="pages">
		<view class="content">
			<view class="title">
				<text>排行榜</text>
				<view class="title-btn">
					<u-button text="更多 >" shape="circle" size="mini"></u-button>
				</view>
			</view>
			<swiper class="swiper" :duration="500" next-margin="60rpx">
				<swiper-item class="swiper-item">
					<text class="soar-title">飙升榜 ></text>
					<view class="swiper-item" v-for="(item,index) in soar" :key="index" @tap="send(child.id)">
						<view class="container">
							<view class="container-left">
								<image :src="item.al.picUrl" mode=""></image>
							</view>
							<view class="container-center">
								<text class="_index">{{index + 1}}</text>
								<view class="_name">
									<text style="font-size: 35rpx;">{{item.name}}</text>
									<text v-if="item.ar"
										style="font-size: 30rpx;color: #999;">{{item.ar[0].name}}</text>
								</view>
							</view>
							<view class="container-right">
								<u-icon name="play-circle" size="45rpx"></u-icon>
							</view>
						</view>
					</view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<text class="soar-title">新歌榜 ></text>
					<view class="swiper-item" v-for="(item,index) in news" :key="index" @tap="send(child.id)">
						<view class="container">
							<view class="container-left">
								<image :src="item.al.picUrl" mode=""></image>
							</view>
							<view class="container-center">
								<text class="_index">{{index + 1}}</text>
								<view class="_name">
									<text style="font-size: 35rpx;">{{item.name}}</text>
									<text v-if="item.ar"
										style="font-size: 30rpx;color: #999;">{{item.ar[0].name}}</text>
								</view>
							</view>
							<view class="container-right">
								<u-icon name="play-circle" size="45rpx"></u-icon>
							</view>
						</view>
					</view>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<text class="soar-title">原创榜 ></text>
					<view class="swiper-item" v-for="(item,index) in original" :key="index" @tap="send(child.id)">
						<view class="container">
							<view class="container-left">
								<image :src="item.al.picUrl" mode=""></image>
							</view>
							<view class="container-center">
								<text class="_index">{{index + 1}}</text>
								<view class="_name">
									<text style="font-size: 35rpx;">{{item.name}}</text>
									<text v-if="item.ar"
										style="font-size: 30rpx;color: #999;">{{item.ar[0].name}}</text>
								</view>
							</view>
							<view class="container-right">
								<u-icon name="play-circle" size="45rpx"></u-icon>
							</view>
						</view>
					</view>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<text class="soar-title">热歌榜 ></text>
					<view class="swiper-item" v-for="(item,index) in hot" :key="index" @tap="send(child.id)">
						<view class="container">
							<view class="container-left">
								<image :src="item.al.picUrl" mode=""></image>
							</view>
							<view class="container-center">
								<text class="_index">{{index + 1}}</text>
								<view class="_name">
									<text style="font-size: 35rpx;">{{item.name}}</text>
									<text v-if="item.ar"
										style="font-size: 30rpx;color: #999;">{{item.ar[0].name}}</text>
								</view>
							</view>
							<view class="container-right">
								<u-icon name="play-circle" size="45rpx"></u-icon>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import {
		getDetailList
	} from '@/http/songs.js'
	export default {
		name: "Top",
		data() {
			return {
				soar: [],
				news: [],
				original:[],
				hot:[],
			};
		},
		methods: {
			async getTopList() {
				const {
					playlist: soar
				} = await getDetailList(19723756)
				this.soar = soar.tracks.slice(0, 3)

				const {
					playlist: news
				} = await getDetailList(3779629)
				this.news = news.tracks.slice(0, 3)
				console.log(this.news);
			},

			async getnext() {
				if (this.original == '') {
					const {
						playlist: original
					} = await getDetailList(2884035)
					console.log(original);
					this.original = original.tracks.slice(0, 3)
					const {
						playlist: hot
					} = await getDetailList(3778678)
					this.hot = hot.tracks.slice(0, 3)
				}
			},
		},
		created() {
			this.getTopList()
			this.getnext()
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #fff;
	}

	.content {
		margin-top: 30rpx;
		border-radius: 15rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			font-size: 35rpx;
			font-weight: bold;
		}

		.swiper {
			height: 450rpx;
			margin: 15rpx 30rpx;
			
			border-radius: 15rpx;

			&-item {
				background-color: #f3f3f3;
				// padding: 0 15rpx;
				margin-top: 15rpx;
				padding-right: 15rpx;

				.soar-title {
					font-size: 30rpx;
					font-weight: bold;
					margin-left: 30rpx;
					
				}

				.container {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					&-left {
						display: flex;

						image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 15rpx;
						}
					}

					&-center {
						display: flex;
						align-items: center;
						padding: 0 15rpx;
						flex: 1;

						._index {
							padding: 0 15rpx;
							font-weight: bold;
							color: #999;
						}

						._name {
							display: flex;
							flex-direction: column;
						}
					}

					&-right {
						width: 45rpx;
					}
				}
			}
		}
	}
</style>
